<template>
  <div class="home">
     <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div class="goods">
      <div class="goodsone" v-for="item,index in goods" :key="item.id" @click="chosegood(index,item)">
        <p>{{item.name}}</p>
        <p>{{item.money | filterprice}}</p>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  filters:{
    filterprice(val){
      return '￥'+val.toFixed(2)
    }
  },
  methods: {
    chosegood(index,good){
      console.log(index);
      this.$router.push({name:'Detail',params:{good}})
    }
  },
  data() {
    return {
      goods:[
        {
          id:1,
          name:'鱼香肉丝',
          money:10
        },
        {
          id:2,
          name:'土豆回锅肉',
          money:12
        },
        {
          id:3,
          name:'糖醋排骨',
          money:22
        },
      ]
    }
  },
}
</script>
<style lang="less" scope>
  .goods{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    .goodsone{
      width: 200px;
      background: pink;
      margin: 0 10px;
    }
  }
</style>
